<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>积分兑换现金券</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../resources/css/mui.css">
	<link rel="stylesheet" href="../../resources/css/mui.picker.min.css">
	<link rel="stylesheet" href="../../resources/css/style.css">
	<link rel="stylesheet" href="../../resources/css/user/register.css">
	<script src="../../resources/assets/mui.js"></script>
	<script src="../../resources/assets/mui.picker.min.js"></script>
	<script src="../../resources/assets/avalon.js"></script>
	<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
	<script src="../../resources/assets/jquery.cxselect.min.js"></script>
	<script src="../../resources/js/common.js"></script>
	<script src="../../resources/js/dahua.config.js"></script>
	<script src="../../resources/js/lang/en.js"></script>
	<!-- <script src="../../resources/js/user/register.js"></script> -->
	<script src="../../resources/js/market/info.js"></script>
	<style type="text/css">
		.mui-content>.mui-table-view:first-child{
			margin-top:-1px;
		}
		.mui-scroll{
			min-height: 100%;
		}
		.my-info{
			display: flex;
			flex-direction: column;
		}
		.my-info .my-head{
			height: 280px;
			background-color: rgba(153,153,153,0.1);
		    display: flex;
			align-items: center;
			justify-content: center;
		}
		.my-info .my-head img{
			width:100%;
		}
		.my-info .my-head .my-coupon{
			height: 167px;
			background-color: #c4b488;
			margin: 60px 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.my-info .my-head .my-coupon span{
			font-size: 28px;
			color: white;
		}
		.my-info .my-body{
			flex: 1;
			background-color: white;
			padding: 20px;
		}
		.my-info .my-body .my-title{
			font-size: 16px;
			height: 40px;
		}
		.my-info .my-body .my-row{
			height: 50px;
			display: flex;
			align-items: center;
		}
		.my-info .my-body .my-row .my-lbl,
		.my-info .my-body .my-row .my-txt{
			color: #999;
		}
		.my-info .my-body .my-row .my-txt{
			flex: 1;
		}
		.my-info .my-body .my-row .my-checkbox{
			background-color: black;
			color: white;
			padding: 5px 20px;
			border-radius: 3px;
		}
		.my-footer{
			display: flex;
			position: absolute;
			z-index: 100;
			left: 0;
			bottom: 0;
			background-color: white;
			height: 49px;
			width: 100%;
			border-top: 1px solid #dedede;
			align-items: center;
			text-align: center;
		}
		.my-footer .my-tip{
			flex: 1;
			font-size: 15px;
		}
		.my-footer .my-btn-ok{
			width: 150px;
			background-color: #25242A;
			height: 100%;
			color: white;
			line-height: 49px;
			font-size: 18px;
		}
	</style>
</head>

<body ms-controller="page" >
	<div id="regPage">
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<h1 id="title" class="mui-title">积分兑换现金券</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white login"></a>
			<a class="mui-icon mui-pull-right mui-icon-white home" href="../product/category.html">
				<i class="icon icon_home"></i>
			</a>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!-- <div class="mui-content-padded"> -->
					<form :validate="@validate" id="form" method="post">
						<input type="hidden" value="" id="uid" name="uid" />
						<input type="hidden" value="" id="id" name="id" ms-duplex="@list.id"/>
						<div class="my-info">
							<div class="my-head">
								<div class="my-coupon" ms-if="@list.couponImage==''">
									<span>{list.score}积分兑换¥{list.value}</span>
								</div>
								<img ms-else ms-attr="{src:list.couponImage}" alt="" onerror="">
							</div>
							<div class="my-body">
								<div class="my-title">{list.couponName}</div>
								<div class="my-row">
									<div class="my-lbl">规格：</div>
									<div class="my-group">
										<div class="my-checkbox">{list.score}积分兑换¥{list.value}</div>
									</div>
								</div>
								<div class="my-row">
									<div class="my-lbl">数量：</div>
									<div id='quantityBox' class="mui-numbox" data-numbox-step='1' data-numbox-min='1'>
										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
										<input class="mui-input-numbox" type="number" id="quantity" name="quantity" ms-duplex="@quantity"/>
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								</div>
								<div class="my-row">
									<div class="my-lbl">一级代理商：</div>
									<div id="showAgentPicker">请选择一级代理商</div>
									<input type="hidden" id="dt", name="dt"/>
								</div>
								<div class="my-row">
									<div class="my-lbl">规则：</div>
									<div class="my-txt">
										{list.rule}
									</div>
								</div>
							</div>
						</div>
					</form>
				<!-- </div> -->			
			</div>
		</div>
	</div>
	<div class="my-footer">
		<div class="my-tip">
			共计：积分{totalScore}
		</div>
		<div class="my-btn-ok">
			兑换
		</div>
	</div>
	<!-- <div class="mui-poppicker">
		<div class="mui-poppicker-header">
			<button class="mui-btn mui-poppicker-btn-cancel">取消</button>
			<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>
			<div class="mui-poppicker-clear"></div>
		</div>
		<div class="mui-poppicker-body">
			<div class="mui-picker" style="width:100%">
				<div class="mui-picker-inner">
					<div class="mui-pciker-rule mui-pciker-rule-ft"></div>
					<ul class="mui-pciker-list" style="transform: perspective(1000px) rotateY(0deg) rotateX(0deg);">
						<li class="highlight" style="transform-origin: center center -89.5px; transform: translateZ(89.5px) rotateX(0deg);">DT</li>
					</ul>
				</div>
			</div>
		</div>
	</div> -->
	<!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item" href="../product/category.html">
				<span class="mui-icon icon icon_product"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item" href="../solution/category.html">
				<span class="mui-icon icon icon_solution"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item mui-active" href="user.html">
				<span class="mui-icon icon icon_usercenter active"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
-->
</body>

</html>
